<template>
  <div id="FaultDispatch" class="wrap">
    <!--查询表单-->
    <el-form label-position="left" size="mini" :inline="true" :model="emp" label-width='90px' class="query-form">
        <el-form-item label="岗位">
            <el-input v-model="emp.p_post" clearable placeholder=""></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="getData(1)">查询</el-button>
            <el-button type="primary" @click="clearQuery">清空</el-button>
            <el-button type="primary" @click="clickAdd()">导出</el-button>
        </el-form-item>
        <el-form-item>
            &nbsp;&nbsp;&nbsp;&nbsp;<a class="text-base" @click='query_show = !query_show; '>更多查询条件<i :class="'iconfont icon-'+query_show"></i></a>
        </el-form-item>
        <div v-show="query_show">
            <div class="input-box">
                <el-form-item label="申请人姓名">
                    <el-input v-model="emp.p_name" clearable placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="籍贯">
                    <el-input v-model="emp.p_native_place" clearable placeholder=""></el-input>
                </el-form-item>
               <el-form-item label="学历">
                    <el-input v-model="emp.p_education" clearable placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-date-picker
                        v-model="emp.createTime"
                        type="daterange"
                        style="width: 230px; margin-right: 30px;"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd"
                        :default-time="['00:00:00', '23:59:59']">
                    </el-date-picker>
                </el-form-item>
            </div>
        </div>
    </el-form>

    <!--客户表格数据展示-->
    <el-table class="table" ref="table" :data="tableData" border style="width: 100%;"
        @sort-change="sortChange" :header-cell-style="{padding: 0,height: '34px'}"
      >
      <el-table-column prop="p_department" sortable="custom" width="150px" label="入职部门"></el-table-column>
      <el-table-column prop="p_post" sortable="custom" width="150px" label="岗位"></el-table-column>
      <el-table-column prop="p_date" sortable="custom" width="150px" label="填表日期"></el-table-column>
      <el-table-column prop="p_name" width="150px" label="申请人姓名"></el-table-column>
      <el-table-column prop="p_gender" width="150px" sortable label="性别"></el-table-column>
      <el-table-column prop="p_age" sortable="custom" width="150px" label="年龄"></el-table-column>
      <el-table-column prop="p_marry" width="150px" sortable label="婚否"></el-table-column>
      <el-table-column prop="savePath" width="150px" sortable label="照片路径">
      <template slot-scope="scope">
        <!-- <p v-if="scope.row.p_photo_path">{{scope.row.p_photo_path}}</p> -->
                <img :src="'http://localhost:8040/xzwj/api/downloadServ?tableName=xzwj_emp_entry_form&cfId=' + scope.row.id" width="40" height="50" alt="">
              </template>
      </el-table-column>
      <el-table-column prop="p_native_place" width="150px" sortable label="籍贯"></el-table-column>
      <el-table-column prop="p_nationality" width="150px" sortable label="民族"></el-table-column>
      <el-table-column prop="p_politics_status" sortable="custom" width="150px" label="政治面貌"></el-table-column>
      <el-table-column prop="p_education" sortable="custom" width="150px" label="学历"></el-table-column>
      <el-table-column prop="p_ID_card" sortable="custom" width="150px" label="身份证号码"></el-table-column>
      <el-table-column prop="p_phone" sortable="custom" width="150px" label="联系电话"></el-table-column>
      <el-table-column prop="p_emergency_contact" width="150px" sortable label="紧急联系人"></el-table-column>
      <el-table-column prop="p_emergency_contact_phone" width="150px" sortable label="紧急联系人电话"></el-table-column>
      <el-table-column prop="p_domicile_place" sortable="custom" width="150px" label="户口所在地"></el-table-column>
      <el-table-column prop="p_residential_address" width="150px" sortable label="现居住地址"></el-table-column>
      <el-table-column prop="p_work_experience" width="150px" sortable label="工作经验"></el-table-column>
      <el-table-column prop="p_work_period1" width="150px" sortable label="工作起止年月1"></el-table-column>
      <el-table-column prop="p_work_unit1" width="150px" sortable label="工作单位1"></el-table-column>
      <el-table-column prop="p_position1" sortable="custom" width="150px" label="工作职位1"></el-table-column>
      <el-table-column prop="p_work_period2" sortable="custom" width="150px" label="工作起止年月2"></el-table-column>
      <el-table-column prop="p_work_unit2" sortable="custom" width="150px" label="工作单位2"></el-table-column>
      <el-table-column prop="p_position2" sortable="custom" width="150px" label="工作职位2"></el-table-column>
      <el-table-column prop="p_work_period3" width="150px" sortable label="工作起止年月3"></el-table-column>
      <el-table-column prop="p_work_unit3" width="150px" sortable label="工作单位3"></el-table-column>
      <el-table-column prop="p_position3" sortable="custom" width="150px" label="工作职位3" ></el-table-column>
      <el-table-column prop="p_education_and_training" width="150px" sortable label="教育培训经历"></el-table-column>
      <el-table-column prop="p_education_period1" width="150px" sortable label="教育起止年月1"></el-table-column>
      <el-table-column prop="p_birthlight_trust1" width="150px" sortable label="教育培训机构1"></el-table-column>
      <el-table-column prop="p_education_specialty1" width="150px" sortable label="教育专业1"></el-table-column>
      <el-table-column prop="p_education_foreign1" sortable="custom"  label="外语程度1" width="150"></el-table-column>
      <el-table-column prop="p_education_certificate1" sortable="custom" width="150px" label="教育证书1"></el-table-column>
      <el-table-column prop="p_education_period2" sortable="custom" width="150px" label="教育起止年月2"></el-table-column>
      <el-table-column prop="p_birthlight_trust2" sortable="custom" width="150px" label="教育培训机构2"></el-table-column>
      <el-table-column prop="p_education_specialty2" width="150px" sortable label="教育专业2"></el-table-column>
      <el-table-column prop="p_education_foreign2" width="150px" sortable label="外语程度2"></el-table-column>
      <el-table-column prop="p_education_certificate2" sortable="custom" width="150px" label="教育证书2"></el-table-column>
      <el-table-column prop="p_education_period3" width="150px" sortable label="教育起止年月3"></el-table-column>
      <el-table-column prop="p_birthlight_trust3" width="150px" sortable label="教育培训机构3"></el-table-column>
      <el-table-column prop="p_education_specialty3" width="150px" sortable label="教育专业3"></el-table-column>
      <el-table-column prop="p_education_foreign3" width="150px" sortable label="外语程度3"></el-table-column>
      <el-table-column prop="p_education_certificate3" sortable="custom" label="教育证书3" width="150"></el-table-column>
      <el-table-column prop="p_family_members" sortable="custom" width="150px" label="家庭成员"></el-table-column>
      <el-table-column prop="p_family_name1" sortable="custom" width="150px" label="家庭成员姓名1"></el-table-column>
      <el-table-column prop="p_family_unit1" sortable="custom" width="150px" label="家庭成员工作单位1"></el-table-column>
      <el-table-column prop="p_family_job1" width="150px" sortable label="家庭成员工作职务1"></el-table-column>
      <el-table-column prop="p_family_phone1" width="150px" sortable label="家庭成员电话1"></el-table-column>
      <el-table-column prop="p_family_name2" sortable="custom" width="150px" label="家庭成员姓名2"></el-table-column>
      <el-table-column prop="p_family_unit2" width="150px" sortable label="家庭成员工作单位2"></el-table-column>
      <el-table-column prop="p_family_job2" width="150px" sortable label="家庭成员工作职务2"></el-table-column>
      <el-table-column prop="p_family_phone2" width="150px" sortable label="家庭成员电话2"></el-table-column>
      <el-table-column prop="p_family_name3" width="150px" sortable label="家庭成员姓名3"></el-table-column>
      <el-table-column prop="p_family_unit3" sortable="custom" label="家庭成员工作单位3" width="150"></el-table-column>
      <el-table-column prop="p_family_job3" sortable="custom"  width="150px" label="家庭成员工作职务3"></el-table-column>
      <el-table-column prop="p_family_phone3" sortable="custom"  width="150px" label="家庭成员电话3"></el-table-column>
      <el-table-column prop="p_affirms" sortable="custom"  width="150px" label="申明人"></el-table-column>
      <el-table-column prop="p_employee_signature" width="150px" sortable label="员工签字"></el-table-column>
      <el-table-column prop="p_signing_date" width="150px" sortable label="签字日期"></el-table-column>
      <el-table-column prop="createtime" sortable="custom"  width="150px" label="创建日期"></el-table-column>
      
      
    
    
    </el-table>

    <!--客户表格数据分页-->
    <el-pagination v-if="count" background layout="total,prev, pager, next"
        :page-size="pageSize"
        @current-change="getData"
        :current-page="currentPage"
        :total="count" style="float: right;">
    </el-pagination>
<!--新增故障单-->
    <el-dialog title="导出员工申请表" width="900px" @close="closeAdd" class="dialog dialogAdd" custom-class="custom-dialog"
               :visible.sync="dialogAddVisible" :close-on-click-modal='false' :modal-append-to-body='false' :modal="false">
     
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
  <div style="margin: 15px 0;"></div>
  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
  </el-checkbox-group>
      

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="export2Excel" size="mini">确 定</el-button>
      </div>
    </el-dialog>
   <viewer :images="images" @inited="inited" class="viewer" ref="viewer">
      <template slot-scope="scope">
        <img v-show="false" v-for="src in scope.images" :src="src" :key="src">
      </template>
    </viewer>
   
    
  </div>
</template>

<script>
import 'viewerjs/dist/viewer.css'
import Viewer from "v-viewer/src/component.vue"
const cityOptions = ['入职部门', '岗位', '填表日期', '申请人姓名', '性别', '年龄', '婚否', '照片路径', '籍贯', '民族', '政治面貌'
, '学历', '身份证号码', '联系电话', '紧急联系人', '紧急联系人电话', '户口所在地', '现居住地址', '工作经验', '工作起止年月1', '工作单位1', '工作职位1'
, '工作起止年月2', '工作单位2', '工作职位2', '工作起止年月3', '工作单位3', '工作职位3', '教育培训经历', '教育起止年月1', '教育培训机构1', '教育专业1', '外语程度1'
, '教育证书1', '教育起止年月2', '教育培训机构2', '教育专业2', '外语程度2', '教育证书2', '教育起止年月3', '教育培训机构3', '教育专业3', '外语程度3', '教育证书3'
, '家庭成员', '家庭成员姓名1', '家庭成员工作单位1', '家庭成员工作职务1', '家庭成员电话1', '家庭成员姓名2', '家庭成员工作单位2', '家庭成员工作职务2', '家庭成员电话2'
,'家庭成员姓名3', '家庭成员工作单位3', '家庭成员工作职务3', '家庭成员电话3', '申明人', '员工签字', '签字日期', '创建日期'];
const map = new Map();

    map.set('入职部门','p_department')
    map.set('岗位','p_post')
    map.set('填表日期','p_date')
    map.set('申请人姓名','p_name')
    map.set('性别','p_gender')
    map.set('年龄','p_age')
    map.set('婚否','p_marry')
    map.set('照片路径','savePath')
    map.set('籍贯','p_native_place')
    map.set('民族','p_nationality')
    map.set('政治面貌','p_politics_status')
    map.set('学历','p_education')
    map.set('身份证号码','p_ID_card')
    map.set('联系电话','p_phone')
    map.set('紧急联系人','p_emergency_contact')
    map.set('紧急联系人电话','p_emergency_contact_phone')
    map.set('户口所在地','p_domicile_place')
    map.set('现居住地址','p_residential_address')
    map.set('工作经验','p_work_experience')
    map.set('工作起止年月1','p_work_period1')
    map.set('工作单位1','p_work_unit1')
    map.set('工作职位1','p_position1')
    map.set('工作起止年月2','p_work_period2')
    map.set('工作单位2','p_work_unit2')
    map.set('工作职位2','p_position2')
    map.set('工作起止年月3','p_work_period3')
    map.set('工作单位3','p_work_unit3')
    map.set('工作职位3','p_position3')
    map.set('教育培训经历','p_education_and_training')
    map.set('教育起止年月1','p_education_period1')
    map.set('教育培训机构1','p_birthlight_trust1')
    map.set('教育专业1','p_education_specialty1')
    map.set('外语程度1','p_education_foreign1')
    map.set('教育证书1','p_education_certificate1')
    map.set('教育起止年月2','p_education_period2')
    map.set('教育培训机构2','p_birthlight_trust2')
    map.set('教育专业2','p_education_specialty2')
    map.set('外语程度2','p_education_foreign2')
    map.set('教育证书2','p_education_certificate2')
    map.set('教育起止年月3','p_education_period3')
    map.set('教育培训机构3','p_birthlight_trust3')
    map.set('教育专业3','p_education_specialty3')
    map.set('外语程度3','p_education_foreign3')
    map.set('教育证书3','p_education_certificate3')
    map.set('家庭成员','p_family_members')
    map.set('家庭成员姓名1','p_family_name1')
    map.set('家庭成员工作单位1','p_family_unit1')
    map.set('家庭成员工作职务1','p_family_job1')
    map.set('家庭成员电话1','p_family_phone1')
    map.set('家庭成员姓名2','p_family_name2')
    map.set('家庭成员工作单位2','p_family_unit2')
    map.set('家庭成员工作职务2','p_family_job2')
    map.set('家庭成员电话2','p_family_phone2')
    map.set('家庭成员姓名3','p_family_name3')
    map.set('家庭成员工作单位3','p_family_unit3')
    map.set('家庭成员工作职务3','p_family_job3')
    map.set('家庭成员电话3','p_family_phone3')
    map.set('申明人','p_affirms')
    map.set('员工签字','p_employee_signature')
    map.set('签字日期','p_signing_date')
    map.set('创建日期','createtime')
    
export default {
  name: 'FaultDispatch',
  components: {
    Viewer
  },
  data () {
    return {
      images: [],
      emp: {},    //  查询条件
      prop: 'createTime', //  排序属性
      order: -1,    //  排序 升序、降序
      tableData: [],    //  当前页数据
      loading: true,
      query_show: false,          //  是否显示更多查询
       dialogAddVisible: false, 
      count: '',      //  总数据条数
      currentPage: 1,//默认开始页面
      pageSize: 20,//每页的数据条数
      checkAll: false,
        checkedCities: ['入职部门', '岗位', '填表日期', '申请人姓名', '性别', '年龄', '婚否', '照片路径', '籍贯', '民族', '政治面貌'
, '学历', '身份证号码', '联系电话', '紧急联系人', '紧急联系人电话', '户口所在地', '现居住地址', '工作经验', '工作起止年月1', '工作单位1', '工作职位1'
, '工作起止年月2', '工作单位2', '工作职位2', '工作起止年月3', '工作单位3', '工作职位3', '教育培训经历', '教育起止年月1', '教育培训机构1', '教育专业1', '外语程度1'
, '教育证书1', '教育起止年月2', '教育培训机构2', '教育专业2', '外语程度2', '教育证书2', '教育起止年月3', '教育培训机构3', '教育专业3', '外语程度3', '教育证书3'
, '家庭成员', '家庭成员姓名1', '家庭成员工作单位1', '家庭成员工作职务1', '家庭成员电话1', '家庭成员姓名2', '家庭成员工作单位2', '家庭成员工作职务2', '家庭成员电话2'
,'家庭成员姓名3', '家庭成员工作单位3', '家庭成员工作职务3', '家庭成员电话3', '申明人', '员工签字', '签字日期', '创建日期'],
        cities: cityOptions,
        isIndeterminate: true,
     
     dcmx:[],
     dcmxzd:[],
    }
  },
  mounted(){
    this.getData(1)
  },

  methods: {
    //  查看图片
    inited (viewer) {
      this.$viewer = viewer
    },
    show (list) {
      let images = []
      list.map(item => {
        images.push(this.config.httpHeadUrl + item)
      })
      this.images = images
      setTimeout(() => {
          this.$viewer.show()
      }, 0)
    },
    clickAdd(){
      this.dialogAddVisible = true
      
    },
    // 关闭新增模态框
    closeAdd(){
      this.dialogAddVisible = false
      this.checkedCities=['入职部门', '岗位', '填表日期', '申请人姓名', '性别', '年龄', '婚否', '照片路径', '籍贯', '民族', '政治面貌'
, '学历', '身份证号码', '联系电话', '紧急联系人', '紧急联系人电话', '户口所在地', '现居住地址', '工作经验', '工作起止年月1', '工作单位1', '工作职位1'
, '工作起止年月2', '工作单位2', '工作职位2', '工作起止年月3', '工作单位3', '工作职位3', '教育培训经历', '教育起止年月1', '教育培训机构1', '教育专业1', '外语程度1'
, '教育证书1', '教育起止年月2', '教育培训机构2', '教育专业2', '外语程度2', '教育证书2', '教育起止年月3', '教育培训机构3', '教育专业3', '外语程度3', '教育证书3'
, '家庭成员', '家庭成员姓名1', '家庭成员工作单位1', '家庭成员工作职务1', '家庭成员电话1', '家庭成员姓名2', '家庭成员工作单位2', '家庭成员工作职务2', '家庭成员电话2'
,'家庭成员姓名3', '家庭成员工作单位3', '家庭成员工作职务3', '家庭成员电话3', '申明人', '员工签字', '签字日期', '创建日期']
    },
    handleCheckAllChange(val) {
      if(val){
        this.dcmx=cityOptions;
        for(var i = 0 ; i < this.dcmx.length; i++){
        this.dcmxzd.push(map.get(this.dcmx[i]))
        }
      }
        this.checkedCities = val ? cityOptions : [];
        this.isIndeterminate = false;
        this.dcmxzd=[];
      },
      handleCheckedCitiesChange(value) {
        this.dcmxzd=[];
        this.dcmx=value;
        for(var i = 0 ; i < value.length; i++){
        this.dcmxzd.push(map.get(value[i]))
        }
        console.log(555)
        console.log(this.dcmxzd)
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
        
      },
    
    //  获取表格数据
    getData(val){
      let params = {}
      let emp = this.deepClone(this.emp)
      params.currentPage = val
      params.pageSize = this.pageSize
      params.emp = emp
      params.prop = this.prop
      params.order = this.order
      this.startLoading()
      this.$post("/api/EmpController/getWxGzds",params, (data) => {
        this.tableData = data.list;
        this.count = data.count;
      })
    },
    //  清空查询
    clearQuery(){
        this.emp = {}
        this.getData(1)
    },
    // 排序
    sortChange(obj){
      this.prop = obj.prop || "createTime"
      this.order = obj.order == 'ascending' ? 1 : -1
      this.getData(1)
    },
    formatJson(filterVal, jsonData) {
　　　return jsonData.map(v => filterVal.map(j => v[j]))
　　},
    export2Excel(value) {
      let params = {}
      let emp = this.deepClone(this.emp)
      params.currentPage = 1
      params.emp = emp
      params.prop = this.prop
      params.order = this.order
      this.$post("/api/EmpController/getWxGzds",params, (data) => {
        
        let tableData = data.list;
        require.ensure([], () => {
  　　　　const { export_json_to_excel } = require('../vendor/Export2Excel');
        
        console.log(888)
        console.log(this.dcmxzd)
  　　　　const tHeader = this.dcmx;
  　　　　const filterVal = this.dcmxzd;
  　　　　const data = this.formatJson(filterVal, tableData);
  　　　　export_json_to_excel(tHeader, data, '员工入职申请表');
          this.dialogAddVisible = false
  　　　})
      })
　  },
  
   
  }
}
</script>

<style lang="less" scoped>
  .custom-dialog{
    margin-top: 0 !important;
  }
  .dialogAdd {
    .el-input, .el-cascader, .el-select, .el-textarea {
      width: 300px;
    }
  }

  .label-box{
    display: flex;
    margin-bottom: 5px;
    .label-text{
      width: 100px;
      text-align: right;
      padding-right: 10px;
    }
    .label-value{
      flex: 1;
    }

  }
  .gzd-detail{
    td{
      vertical-align: top;
    }
  }
</style>
<style lang="less">
    .long-form .el-form-item__label{
      line-height: 16px;
    }
    #FaultDispatch .gzdxq-dialog{
      height: 74vh;
      .el-dialog__body{
        padding-top: 0;
        height: calc(100% - 34px);
        .el-tabs{
          height: 100%;
          .el-tabs__content{
            height: calc(100% - 40px);
            overflow: auto;
          }
        }
      }
    }
</style>

